<template>
  <div>
    <!-- {{ name }}
    <button @click="text">按钮</button> -->
    <!-- <NewRef></NewRef> -->
    <!-- <NewSetups title="章三" v-on:hander="hander"></NewSetups> -->

    <!-- <TodoListVue></TodoListVue> -->

    <!-- <NewComputed></NewComputed> -->

    <!-- <NewWatch></NewWatch> -->

    <!-- <NewMapVue></NewMapVue> -->
  </div>
</template>

<script>
import NewRef from "@/components/NewRef.vue";
import NewSetups from "./components/NewSetups.vue";
import TodoListVue from "./components/TodoList.vue";
import NewComputed from "./components/NewComputed.vue";
import NewWatch from "./components/NewWatch.vue";
import VRhouse from "./components/VRhouse.vue";
import NewMapVue from './components/NewMap.vue';
export default {
  components: {
    NewRef,
    NewSetups,
    TodoListVue,
    NewComputed,
    NewWatch,
    VRhouse,
    NewMapVue
  },
  // beforeCreate() {}, xx
  // created() {}, xx

  // data() {
  //   return {
  //     name: '李四'
  //   }
  // },
  // props 接收传递过来的属性
  // context 对象 里面有一些属性
  methods: {
    text() {
      console.log("你好");
    },
    hander() {
      console.log("出发啦");
    },
  },
  // setup 没有this
  setup() {

    // 必须要rturen
    let name = "李四";

    const all = () => {
      console.log();
    };

    // const hander = () => {}
    return {
      name,
      all,
    };
  },
};
</script>

<style>
body,
html,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100%;
}
</style>